<template>
	<!-- 搜索页面 -->
	<view>
		<view class="seekbox">
			<image src="../../static/sous.png" style="transition:all 0.2s linear;" :class="'seekbg'+inpute" >
			</image>
			<input @focus="inp_focus" @blur="inp_blur" style="transition:all 0.2s linear;font-size:30rpx;"
				:class="'seekinput'+inpute" placeholder="默认关键字" v-model:value="inputdata" />
			<view class="seekbuton" v-if="inputdata!='' || inpute=='1' " @click="clicksearch">搜索</view>
			<!-- 搜索不能为空 -->
			<view @click="deleteval" v-if="inputdata!=''" class="iconfont icon-qingkong seekicon"
				style="font-size:35rpx;"></view>
		</view>
		<view class="back"></view>
		<view class="historys">
			<!-- 跟vue的v-html丢失样式解决办法一样，在css中用 .xxx &gt;&gt;&gt; .xxx 解决 （样式穿透），在less中用 .xxx /deep/ .xxxx -->
			<rich-text>
				历史搜索
			</rich-text>
			<icon class="iconfont qingko" @click="demmo"></icon>
			<view class="History">
				<view v-for="(item,index) in seeekhistory" :key="index" @click="clisck(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inpute: "",
				inputdata: "",
				seeekhistory: []
			}
		},
		onLoad() {
			if(uni.getStorageSync('seeekhistory') != ''){//接收全局传过来的值
				this.seeekhistory = uni.getStorageSync('seeekhistory')
			}
		},
		onShow() {
			if (uni.getStorageSync('accessToken') == '') {
				uni.showModal({
					title: '登录提示',
					content: '您尚未登录，是否立即登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../long/long'
							})
							return
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		methods: {
			clicksearch() {
				this.inpute = 1
				let _this = this
				this.seeekhistory.push(this.inputdata)
				uni.setStorageSync('seeekhistory', Array.from(new Set(this.seeekhistory)))
				this.seeekhistory = uni.getStorageSync('seeekhistory');
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=goods&_mt=getGoodsPage&pageNo=&pageSize=&categoryId=&orderBy=&isAsc=&title=' + this.inputdata,
					success: (res) => {
						console.log(res)
						var list = JSON.stringify(res.data.data.items)//数组
						if (this.seeekhistory != '') {
							uni.navigateTo({
								url: `/pages/Productlist/Productlist?goods=${list}&name=${this.inputdata}`
							})
						}
					}
				});
				uni.getStorageSync('seeekhistory', this.seeekhistory);
			},
			clisck(e){
				// console.log(index)
				uni.navigateTo({
					url: '/pages/Productlist/Productlist?data='+e+''
				})
			},
			deleteval() {
				this.inputdata = ''
			},
			inp_focus: function() {
				this.inpute = 1
			},
			inp_blur: function() {
				if (this.inputdata == '') {
					this.inpute = ''
				}
			},
			demmo() {
				uni.removeStorageSync('seeekhistory')
				this.seeekhistory = ''
			},
		}
	}
</script>

<style scoped="scoped">
	page {background-color: #F2F2F2;}
	.historys {margin-top: 96rpx !important;border-radius: 30rpx 30rpx 0rpx 0rpx;width: 100%;background-color: #FFFFFF;height: 1087rpx;}
	.History {width: 700rpx;margin-top: 20rpx;display: flex;flex-wrap: wrap;}
	.History view {color: #6B6B6B;background-color: #F2F2F2;font-size: 27rpx;padding: 5rpx 14rpx;border-radius: 20rpx;margin-left: 27rpx;margin-top: 20rpx;}
	.historys {padding-top: 20rpx;margin-top: 120rpx;}
	.userbg {width: 100%;height: 400rpx;}
	.qingko{font-size: 35rpx;float: right;margin-right: 100rpx;}
	rich-text {
		color: #363636;
		font-size: 29rpx;
		text-indent: 30rpx;
		float: left;
	}
	.seekbuton {z-index: 9;position: absolute;top: 19rpx;right: 20rpx;height: 60rpx;line-height: 60rpx;text-align: center;width: 120rpx;color: #FFFFFF;background: linear-gradient(to right, #FF9301, #FF5909);font-size: 28rpx;border-radius: 0rpx 40rpx 40rpx 0rpx;}
	.seekicon {z-index: 9;position: absolute;top: 30rpx;right: 150rpx;color: #7f7f7f;}
	.seekbg {position: absolute;left: 256rpx;width: 60rpx;height: 60rpx;top: 20rpx;}
	.seekbg1 {position: absolute;left: 22rpx;width: 60rpx;height: 60rpx;top: 20rpx;}
	.seekbox {position: fixed;width: 100%;top: 0rpx;height: 75rpx;background-color: #F2F2F2;padding-top: 18rpx;}
	.seekinput1 {padding-left: 60rpx;margin: auto;width: 87%;height: 60rpx;border-radius: 40rpx;background-color: #FFFFFF;}
	.seekinput {padding-left: 290rpx;margin: auto;width: 56%;height: 60rpx;border-radius: 40rpx;background-color: #FFFFFF;}
</style>
